<template>
	<view class="main u-page">
		
		<view class="head">
			<!-- <view class="top">
				<view class="top_left">
			
				</view>
				<view class="top_right">
					<text class="lg text-gray cuIcon-sort" @click="showModal"></text>
				</view>
			</view> -->
			<view class="head_box">
				<view class="job_box">
					<view class="u-page__tag-item">
						<u-search
							v-model="form.keyword"
							:show-action="false"
							shape="square"
							@change="getResume"
						></u-search>
					</view>
				</view>
				<view class="tag_box">
					<text class="label_item">按标签搜索：</text>
					<text v-for="(item,index) in label" :key="index" @click="setWelfare(item)">{{item}}</text>
				</view>
				<view class="tag_box" style="display: flex;">
					<view style="margin-right: 20rpx;display: flex;align-items: center;">
						<picker @change="educationSelect" :range="educationlist">
							<view class="picker">{{form.education || "搜学历"}}</view>
						</picker>
					</view>
					<view style="margin-right: 20rpx;display: flex;align-items: center;">
						<picker @change="workSelect" :range="worklist">
							<view class="picker">{{form.work_y || "搜经验"}}</view>
						</picker>
					</view>
					<view style="display: flex;align-items: center;">
						<uni-data-picker 
						:placeholder="regiondata || '搜城市'"
						popup-title="请选择城市" 
						:localdata="cityitems"
						:step-searh="true" 
						@change="regionchange" 
						@nodeclick="onnodeclick" />
					</view>
				</view>
			</view>
		</view>
		<view class="main_content">
			<block v-for="(item,index) in list">
				<view class="company_box">
					<view class="company_item_box" @click="goto('/pages/enterprise/resumedetails?id='+item.uid)+'&money='+money">
						<view class="company_name">
							{{item.name || ""}}
							<text style="margin-left:20rpx;font-size: 24rpx;">
								{{item.education || ""}} - {{item.age1 || ""}} -{{item.work_y || ""}}经验- {{item.salary || ""}}
							</text>
						</view>
						<view class="company_job">期望工作：{{item.skill || ""}}</view>
						<view class="company_job">期望城市：{{item.expect_city || ""}}</view>
						<view class="company_intro">
							人生规划：{{item.plan || ""}}
						</view>
					</view>
					<view class="company_logo">
						<view class="company_logo_item">
							<image :src="item.sex == '男' ? '/static/img/man.png' : '/static/img/woman.png'"></image>
						</view>
						<!-- <view class="jsob_yao_item" @click="openmodel(item.uid)">邀请</view> -->
					</view>
				</view>
			</block>
		</view>
		<Tabbar :count="1"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from "@/components/entTabbar"
	import { formatTime } from '@/utils/utils'
	import { imgURL } from '@/utils/config'
	import { getResumeList } from '@/api/resume.js'
	import { getUserInfo } from '@/api/user.js'
	import { getTree } from '@/api/area.js'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				money:0,
				imgURL:imgURL,
				list: [],
				label:['应届生','就职人才'],
				educationlist:['小学','初中','中专','高中','大专','本科','硕士','博士',],
				worklist:['应届生','1-3年','3-5年'],
				cityitems:[],
				regiondata: '',
				form:{
					page:1,
					pagesize:20,
					total:0,
					keyword:'',
					work_y:'',
					education:'',
					city:''
				},
			}
		},
		onLoad() {
			this.getResume()
			this.getTreelist()
		},
		methods: {
			setWelfare(item){
				this.form.keyword = item
				this.getResume()
			},
			//获取信息
			getResume() {
				getUserInfo().then(res=>{
					if(res.code == 200){
						this.money = res.data.money
					}
				})
				getResumeList(this.form).then(res=>{
					if(res.code == 200){
						this.list = res.data.data
						this.form.total = res.data.total
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			getTreelist(){
				getTree().then(res=>{
					if(res.code == 200){
						this.cityitems = res.data
					}
				})
			},
			
			regionchange(e) {
				this.form.page= 1
				this.form.pagesize=20
				this.form.total = 0
				this.list = []
				const value = e.detail.value
				this.form.city = value[1].value
				this.regiondata = value[0].text + ',' + value[1].text
				this.getResume()
			},
			
			onnodeclick(e) {
				console.log(e)
			},
			//搜学历
			educationSelect(e){
				this.form.page= 1
				this.form.pagesize=20
				this.form.total = 0
				this.list = []
				const index = e.detail.value
				this.form.education = this.educationlist[index]

				this.getResume()
			},
			workSelect(e){
				this.form.page= 1
				this.form.pagesize=20
				this.form.total = 0
				this.list = []
				const index = e.detail.value
				this.form.work_y = this.worklist[index]
				this.getResume()
			},
			hideModal() {
				this.showmodal = false
			},
			goto(tourl) {
				// if(this.money < 5){
				// 	return uni.showToast({
				// 		icon: 'none',
				// 		title: "猫币不足请充值"
				// 	});
				// }
				uni.navigateTo({
					url: tourl
				});
			}
		},
	}
</script>

<style lang="scss">
	/deep/.placeholder{
		font-size: 30rpx !important;
		color: #fff !important;
	}
	/deep/ .input-value-border{border: none !important;color: #fff !important;}
	/deep/ .text-color{color: #fff !important;}
	.picker{
		font-size: 28rpx !important;
	}
	.head{
		background-image: url('');
		background-repeat:no-repeat;
		background-attachment:fixed;
		background-size:cover;
		width: 100%;
		height: 500rpx;
		display: block;
		image{
			width: 100%;
			height: 100%;
		}
		
		.top{
			padding: 12rpx 60rpx;
			display: flex;
			justify-content: space-between;
				align-items: center;
			.top_left{
				
			}
			.top_right{
				display: flex;
				align-items: center;
				font-size: 60rpx;
				color: #fff;
			}
		}
		.head_box{
			position: absolute;
			top: 80rpx;
			width: 100%;
			.job_box{
				margin: 0 40rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 48rpx;
				color: #fff;
				text{
					color: #43e4f8;
				}
			}
			.tag_box{
				margin: 0 60rpx;
				height:80rpx;
				line-height: 80rpx;
				color: #fff;
				font-size: 26rpx;
				.label_item{
					color: #43e4f8;
				}
				text{margin-right: 10rpx;}
			}
		}
	}
	.main_content{
		margin-top: -160rpx;
		.company_box{
			background-color: #f9f9f9;
			display: flex;
			justify-content: space-between;
			margin: 20rpx;
			padding: 20rpx;
			font-size: 28rpx;
			border-radius: 12rpx;
			color: #000;
			.company_logo{
				flex: 1;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				margin-left: 20rpx;
				.jsob_yao_item{
					border: 1px solid #f3f3f3;
					background-color: #fff;
					font-size: 28rpx;
					margin-top: 20rpx;
					padding: 10rpx;
					width: 100%;
					text-align: center;
				}
				.company_logo_item{
					position: relative;
					width:90rpx; 
					height:90rpx;
					image{
						max-width: 100% !important;
						max-height: 100% !important;
					}
				}
			}
			.company_item_box{
				width: 550rpx;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				.company_name{
					width:550rpx;
					font-size: 36rpx;
					height: 50rpx;
					line-height: 50rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
				.company_handle{
					margin: 20rpx;
					.handle_shenqin{
						width: 200rpx;
						height: 50rpx;
					}
				}
				
				.company_job,.company_addr,.company_salary{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					line-height: 50rpx;
					color: #777777;
				}
				.jsob_yao_item{
					border: 1px solid #f3f3f3;
					background-color: #fff;
					font-size: 28rpx;
					padding: 10rpx 30rpx;
				}
				.company_intro{
					line-height: 50rpx;
					color: #777777;
				}
			}
		}
	}
	.foot{
		background-color: #000;
	}
	
	.main_resume_foot{
		width: 100%;
		display: flex;
		align-items: center;
		color: #fff;
		position: fixed;
		bottom: 0;
		.foot_left{
			height:120rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			background-color: #795fff;
			width: 50%;
			padding-top: 20rpx;
			text{
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				display: block;
				width: 100%;
			}
		}
		.foot_right{
			text-align: center;
			height:140rpx;
			line-height: 140rpx;
			width: 50%;
			background-color: #000;
		}
	}
</style>